import { Link } from "react-router-dom";
import AppHeaderNav from "@/components/appHeader/appHeaderNav";
import "./index.scss";
import { useScroll } from "ahooks";
import { useRef, useState } from "react";
import classNames from "classnames";
function AppheaderSticky() {
  const [show, setshow] = useState(false);
  useScroll(document, (val) => {
    if (val.top >= 78) {
      setshow(true);
    } else {
      setshow(false);
    }
    return false;
  });

  return (
    <div className={classNames("app-header-sticky", { show: show })}>
      <div className="container">
        <Link className="logo" to="/" />
        {show && <AppHeaderNav />}
        <div className="right">
          <Link to="/">品牌</Link>
          <Link to="/">专题</Link>
        </div>
      </div>
    </div>
  );
}

export default AppheaderSticky;
